<template>
  <div class="tag-factory">
    <factory-config-list @addItem="addItem" :preview="preview"></factory-config-list>
    <import-content ref="factoryContent"></import-content>
  </div>
</template>

<script>
import factoryConfigList from '../factory-config-list'
import importContent from './import-content'
export default {
  components: {
    factoryConfigList,
    importContent
  },
  data() {
    return {
      preview: false
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$route.query.tagId) this.$refs.factoryContent.getDetail({ tagId: this.$route.query.tagId })
      if (this.$route.query.groupId) this.$refs.factoryContent.updateGroup(this.$route.query.groupId)
      this.watchPreview()
    })
  },
  methods: {
    addItem(item) {
      this.$refs.factoryContent.addItem(item)
    },
    watchPreview() {
      this.$watch(
        '$refs.factoryContent.$ref.factoryCust.showCust',
        val => {
          this.preview = val
        },
        {
          deep: true,
          immediate: true
        }
      )
    }
  }
}
</script>

<style lang="scss"></style>
